import React from 'react'
import { useNavigate, useParams } from 'react-router-dom'

const STU_DATA = [
    {
        id: 1,
        name: 'yjd'
    },
    {
        id: 2,
        name: 'lzx'
    },
    {
        id: 3,
        name: 'ydd'
    }
]

export const Student = () => {
  const {id} = useParams()
  const nav = useNavigate()
    //   同useNavigate()钩子函数，还有Navigate组件和Navlink组件
  const stu = STU_DATA.find(item => item.id === +id)
  const btnHandle = () => {
    // nav('/about')
    nav('/about', {replace: true})
  }
  return (
    <div>
        <ul>
            <h3>{stu.id} --- {stu.name}</h3>
        </ul>
        <button onClick={btnHandle}>点击跳转</button>
    </div>
  )
}
